<template>
  <div class="radio-demo-container">
    <h2>多组单选按钮示例</h2>
    
    <!-- 第一组：性别选择 -->
    <div class="radio-group">
      <h3>1. 请选择性别：</h3>
      <label class="radio-item">
        <input 
          type="radio" 
          name="gender" 
          value="male"
          v-model="formData.gender"
        >
        男
      </label>
      <label class="radio-item">
        <input 
          type="radio" 
          name="gender" 
          value="female"
          v-model="formData.gender"
        >
        女
      </label>
      <label class="radio-item">
        <input 
          type="radio" 
          name="gender" 
          value="other"
          v-model="formData.gender"
        >
        其他
      </label>
    </div>

    <!-- 第二组：学历选择 -->
    <div class="radio-group">
      <h3>2. 请选择最高学历：</h3>
      <label class="radio-item">
        <input 
          type="radio" 
          name="education" 
          value="highSchool"
          v-model="formData.education"
        >
        高中及以下
      </label>
      <label class="radio-item">
        <input 
          type="radio" 
          name="education" 
          value="college"
          v-model="formData.education"
        >
        大专
      </label>
      <label class="radio-item">
        <input 
          type="radio" 
          name="education" 
          value="bachelor"
          v-model="formData.education"
        >
        本科
      </label>
      <label class="radio-item">
        <input 
          type="radio" 
          name="education" 
          value="master"
          v-model="formData.education"
        >
        硕士及以上
      </label>
    </div>

    <!-- 第三组：兴趣选择（动态生成选项） -->
    <div class="radio-group">
      <h3>3. 请选择主要兴趣：</h3>
      <label 
        class="radio-item"
        v-for="(interest, index) in interests" 
        :key="index"
      >
        <input 
          type="radio" 
          name="interest" 
          :value="interest.value"
          v-model="formData.interest"
        >
        {{ interest.label }}
      </label>
    </div>

    <!-- 显示当前选择 -->
    <div class="selection-result">
      <h3>当前选择：</h3>
      <pre>{{ formData }}</pre>
    </div>

    <!-- 操作按钮 -->
    <div class="button-group">
      <button @click="resetSelection">重置选择</button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';

// 存储选择状态的数据对象
const formData = ref({
  gender: '',         // 性别选择（初始为空）
  education: '',  // 学历选择（默认本科）
  interest: ''        // 兴趣选择（初始为空）
});

// 动态选项数据
const interests = ref([
  { label: '阅读', value: 'reading' },
  { label: '运动', value: 'sports' },
  { label: '音乐', value: 'music' },
  { label: '旅行', value: 'travel' }
]);

// 重置选择状态
const resetSelection = () => {
  formData.value = {
    gender: '',
    education: '',
    interest: ''
  };
};
</script>

<style scoped>
.radio-demo-container {
  max-width: 800px;
  margin: 20px auto;
  padding: 20px;
  font-family: 'Arial', sans-serif;
}

.radio-group {
  margin-bottom: 30px;
  padding: 20px;
  background-color: #f8fafc;
  border-radius: 8px;
}

.radio-item {
  display: inline-flex;
  align-items: center;
  margin-right: 20px;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 4px;
  transition: background-color 0.2s;
}

.radio-item:hover {
  background-color: #eef2ff;
}

.radio-item input {
  margin-right: 8px;
  width: 16px;
  height: 16px;
}

.selection-result {
  margin: 20px 0;
  padding: 15px;
  background-color: #f0f9ff;
  border-radius: 8px;
  border: 1px solid #e0f2fe;
}

.selection-result pre {
  margin: 0;
  padding: 10px;
  background-color: #fff;
  border-radius: 4px;
  font-size: 14px;
  overflow-x: auto;
}

.button-group {
  margin-top: 20px;
}

.button-group button {
  padding: 8px 16px;
  background-color: #3b82f6;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.button-group button:hover {
  background-color: #2563eb;
}
</style>
